<template>

    <el-dialog title="发送邮箱验证码" v-model="diavisible" width="500">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item prop="email" label="邮箱">
                {{ ruleForm.email }}
            </el-form-item>
            <el-form-item prop="checkCode">
                <el-input v-model="ruleForm.checkCode" style="width: 55%;margin-right: 10px;" placeholder="请输入验证码" />
                <img :src="src" alt="" style="display: inline-block;cursor:pointer" @click="getsrc">
            </el-form-item>
            <el-form-item>
                <div style="text-align: right;    width: 100%;">
                    <el-button style="float: right;" @click="send" type="primary">发送验证码</el-button>
                </div>
            </el-form-item>
        </el-form>

    </el-dialog>

</template>
<script setup>
import service from '@/utils/Request';
import { onMounted, ref } from 'vue';
const ruleFormRef = ref(null)
const diavisible = ref(false);
const ruleForm = ref({})
const type = ref("");
const props = defineProps(["type", "email", "sendtype"])
const src = ref("");
const sendtype = ref("")
const rules = {
    checkCode: [
        { required: true, message: '请输入验证码', trigger: 'blur' }]
}

const getsrc = () => {
    src.value = `/api/checkCode?type=${type.value}&&time=` + new Date();
}
const open = () => {
    setTimeout(() => {
        type.value = props.type;
        console.log(props, "pros")
        ruleForm.value.email = props.email
        diavisible.value = true
        sendtype.value = props.sendtype
        getsrc()
    }, 100)

}
const send = async () => {
    ruleFormRef.value.validate(async (valid) => {
        if (valid) {
            const res = await service.post("/sendEmailCode", {
                email: ruleForm.value.email,
                checkCode: ruleForm.value.checkCode,
                type: sendtype.value
            })
            if (res.code == 0) {
                getsrc()
            } else {
                diavisible.value = false

            }
            console.log(res)
        }
    })


}
defineExpose({
    open
})
</script>